<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        知识点1: 边框图片
        使用场景: div容器大小不一, 但是边框样式相同, 此时就需要使用边框图片来完成.

     -->
    <link rel="stylesheet" href="fonts/icomoon.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/echarts.min.js"></script>
    <script src="js/flexible.js"></script>
    <script src="js/jquery.min.js"></script>

</head>

<body>
    <div class="viewport">
        <div class="column">
            <!-- 概览区域 -->
            <div class="panel overview">
                <div class="inner">
                    <ul>
                        <li>
                            <h4>2,190</h4>
                            <span>
                                <i class="icon-dot" style="color: #006cff"></i>
                                设备总数
                            </span>
                        </li>
                        <li>
                            <h4>190</h4>
                            <span>
                                <i class="icon-dot" style="color: #6acca3"></i>
                                季度新增
                            </span>
                        </li>
                        <li>
                            <h4>3,001</h4>
                            <span>
                                <i class="icon-dot" style="color: #6acca3"></i>
                                运营设备
                            </span>
                        </li>
                        <li>
                            <h4>108</h4>
                            <span>
                                <i class="icon-dot" style="color: #ed3f35"></i>
                                异常设备
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 监控区域 -->
            <div class="panel monitor">
                <div class="inner">
                    <div class="tabs">
                        <a href="javascript:;" class="active">故障设备监控</a>
                        <a href="javascript:;">异常设备监控</a>
                    </div>
                    <div class="content" style="display: block;">
                        <div class="head">
                            <span class="col ">故障时间</span>
                            <span class="col ">设备地址</span>
                            <span class="col ">异常代码</span>
                        </div>
                        <div class="marquee-view ">
                            <div class="marquee ">
                                <div class="row ">
                                    <span class="col ">20180701</span>
                                    <span class="col ">11北京市昌平西路金燕龙写字楼</span>
                                    <span class="col ">1000001</span>
                                    <span class="icon-dot "></span>
                                </div>
                                <div class="row ">
                                    <span class="col ">20190601</span>
                                    <span class="col ">北京市昌平区城西路金燕龙写字楼</span>
                                    <span class="col ">1000002</span>
                                    <span class="icon-dot "></span>
                                </div>
                                <div class="row ">
                                    <span class="col ">20190704</span>
                                    <span class="col ">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col ">1000003</span>
                                    <span class="icon-dot "></span>
                                </div>
                                <div class="row ">
                                    <span class="col ">20180701</span>
                                    <span class="col ">北京市昌平区建路金燕龙写字楼</span>
                                    <span class="col ">1000004</span>
                                    <span class="icon-dot "></span>
                                </div>
                                <div class="row ">
                                    <span class="col ">20190701</span>
                                    <span class="col ">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col ">1000005</span>
                                    <span class="icon-dot "></span>
                                </div>
                                <div class="row ">
                                    <span class="col ">20190701</span>
                                    <span class="col ">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col ">1000006</span>
                                    <span class="icon-dot "></span>
                                </div>
                                <div class="row ">
                                    <span class="col ">20190701</span>
                                    <span class="col ">北京市昌平区建西路金燕龙写字楼</span>
                                    <span class="col ">1000007</span>
                                    <span class="icon-dot "></span>
                                </div>
                                <div class="row ">
                                    <span class="col ">20190701</span>
                                    <span class="col ">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col ">1000008</span>
                                    <span class="icon-dot "></span>
                                </div>
                                <div class="row ">
                                    <span class="col ">20190701</span>
                                    <span class="col ">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col ">1000009</span>
                                    <span class="icon-dot "></span>
                                </div>
                                <div class="row ">
                                    <span class="col ">20190710</span>
                                    <span class="col ">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col ">1000010</span>
                                    <span class="icon-dot "></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content ">
                        <div class="head ">
                            <span class="col ">异常时间</span>
                            <span class="col ">设备地址</span>
                            <span class="col ">异常代码</span>
                        </div>
                        <div class="marquee-view ">
                            <div class="marquee ">
                                <div class="row ">
                                    <span class="col ">20190701</span>
                                    <span class="col ">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col ">1000001</span>
                                    <span class="icon-dot "></span>
                                </div>
                                <div class="row ">
                                    <span class="col ">20190701</span>
                                    <span class="col ">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col ">1000002</span>
                                    <span class="icon-dot "></span>
                                </div>
                                <div class="row ">
                                    <span class="col ">20190703</span>
                                    <span class="col ">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col ">1000002</span>
                                    <span class="icon-dot "></span>
                                </div>
                                <div class="row ">
                                    <span class="col ">20190704</span>
                                    <span class="col ">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col ">1000002</span>
                                    <span class="icon-dot "></span>
                                </div>
                                <div class="row ">
                                    <span class="col ">20190705</span>
                                    <span class="col ">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col ">1000002</span>
                                    <span class="icon-dot "></span>
                                </div>
                                <div class="row ">
                                    <span class="col ">20190706</span>
                                    <span class="col ">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col ">1000002</span>
                                    <span class="icon-dot "></span>
                                </div>
                                <div class="row ">
                                    <span class="col ">20190707</span>
                                    <span class="col ">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col ">1000002</span>
                                    <span class="icon-dot "></span>
                                </div>
                                <div class="row ">
                                    <span class="col ">20190708</span>
                                    <span class="col ">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col ">1000002</span>
                                    <span class="icon-dot "></span>
                                </div>
                                <div class="row ">
                                    <span class="col ">20190709</span>
                                    <span class="col ">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col ">1000002</span>
                                    <span class="icon-dot "></span>
                                </div>
                                <div class="row ">
                                    <span class="col ">20190710</span>
                                    <span class="col ">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col ">1000002</span>
                                    <span class="icon-dot "></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 点位区域 -->
            <div class="point panel">
                <div class="inner">
                    <h3>点位分布统计</h3>
                    <div class="chart">
                        <div class="pie"></div>
                        <div class="data">
                            <div class="item">
                                <h4>320,11</h4>
                                <span>
                          <i class="icon-dot" style="color: #ed3f35"></i>
                          点位总数
                        </span>
                            </div>
                            <div class="item">
                                <h4>418</h4>
                                <span>
                          <i class="icon-dot" style="color: #eacf19"></i>
                          本月新增
                        </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column ">
            <!-- 地图区域 -->
            <div class="map">
                <h3>
                    <span class="icon-cube"></span> 设备数据统计
                </h3>
                <div class="chart">
                    <div class="geo"></div>
                </div>
            </div>
            <!-- 用户区域 -->
            <div class="users panel">
                <div class="inner">
                    <h3>全国用户总量统计</h3>
                    <div class="chart">
                        <div class="bar"></div>
                        <div class="data">
                            <div class="item">
                                <h4>120,899</h4>
                                <span>
                          <i class="icon-dot" style="color: #ed3f35"></i>
                          用户总量
                        </span>
                            </div>
                            <div class="item">
                                <h4>248</h4>
                                <span>
                          <i class="icon-dot" style="color: #eacf19"></i>
                          本月新增
                        </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column ">
            <!-- 订单区域 -->
            <div class="order panel">
                <div class="inner">
                    <!-- 筛选 -->
                    <div class="filter">
                        <a href="javascript:;" class="active">365天</a>
                        <a href="javascript:;">90天</a>
                        <a href="javascript:;">30天</a>
                        <a href="javascript:;">24小时</a>
                    </div>
                    <!-- 数据 -->
                    <div class="data">
                        <div class="item">
                            <h4>20,301,987</h4>
                            <span>
                <i class="icon-dot" style="color: #ed3f35;"></i>
                订单量
              </span>
                        </div>
                        <div class="item">
                            <h4>99834</h4>
                            <span>
                <i class="icon-dot" style="color: #eacf19;"></i>
                销售额(万元)
              </span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 销售区域 -->
            <div class="sales panel">
                <div class="inner">
                    <div class="caption">
                        <h3>销售额统计</h3>
                        <!-- data-xx是H5新增的自定义属性 -->
                        <a href="javascript:;" class="active" data-type="year">年</a>
                        <a href="javascript:;" data-type="quarter">季</a>
                        <a href="javascript:;" data-type="month">月</a>
                        <a href="javascript:;" data-type="week">周</a>
                    </div>
                    <div class="chart">
                        <div class="label">单位:万</div>
                        <div class="line"></div>
                    </div>
                </div>
            </div>
            <!-- 渠道和季度区域 -->
            <div class="wrap">
                <div class="channel panel">
                    <div class="inner">
                        <h3>渠道分布</h3>
                        <div class="data">
                            <div class="radar"></div>
                        </div>
                    </div>
                </div>
                <div class="quarter panel">
                    <div class="inner">
                        <h3>一季度销售进度</h3>
                        <div class="chart">
                            <div class="box">
                                <div class="gauge"></div>
                                <div class="label">75<small> %</small></div>
                            </div>
                            <div class="data">
                                <div class="item">
                                    <h4>1,321</h4>
                                    <span>
                    <i class="icon-dot" style="color: #6acca3"></i>
                    销售额(万元)
                  </span>
                                </div>
                                <div class="item">
                                    <h4>150%</h4>
                                    <span>
                    <i class="icon-dot" style="color: #ed3f35"></i>
                    同比增长
                  </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 排行榜 -->
            <div class="top panel">
                <div class="inner">
                    <div class="all">
                        <h3>全国热榜</h3>
                        <ul>
                            <li>
                                <i class="icon-cup1" style="color: #d93f36;"></i> 可爱多
                            </li>
                            <li>
                                <i class="icon-cup2" style="color: #68d8fe;"></i> 娃哈啥
                            </li>
                            <li>
                                <i class="icon-cup3" style="color: #4c9bfd;"></i> 喜之郎
                            </li>
                        </ul>
                    </div>
                    <div class="province">
                        <h3>各省热销 <i class="date">// 近30日 //</i></h3>
                        <div class="data">
                            <ul class="sup">
                                <!-- <li>
                                    <span>北京</span>
                                    <span>25,179 <s class="icon-up"></s></span>
                                </li> -->
                            </ul>
                            <ul class="sub">
                                <!-- <li><span></span><span> <s class="icon-up"></s></span></li> -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="js/index.js"></script>
    <script src="js/china.js"></script>
    <script src="js/map.js"></script>
</body>

</html>